<template>
  <div :key="pageKey">
    <div class="showView">
      <div id="showul">
      <ul v-if="cardList">
        <li v-for="(obj,i) in cardList" :key="obj.id" :class="getColor(i)">
          <div class="shang">
            <div :class="'checkCircle '+ (obj.selected ? 'onCheck' : 'noCheck')" @click="clickCheckCircle(i)"></div>
            <div class="cardTitle">{{obj.title}}</div>
            <img id="jiantou" src="../../../assets/img/icon/jiantou.png" @click="clickJiantou(i)">
          </div>
          <div class="xia">
            <div class="cardContent">{{obj.content}}</div>
<!--            <div class="cardInput">-->
            <input type="text" v-model="obj.reply" placeholder="回复申诉问题（选填）">
<!--            </div>-->
          </div>
        </li>
      </ul>
      </div>
      <div class="bottomBar">
        <div class="selectAll">
          <!--        <img src="../../../assets/img/icon/file_rb_n.svg">-->
          <div :class="'circle ' + (checkAll?'onCheck1':'')" @click="clickSelectAll" :id="(checkAll?'noBorder':'')"></div>
          <span>全选</span>
        </div>
        <div class="passButtom" @click="clickButtom">{{(state1 ? '不': '')}}通过<span v-if="checkedCards.length">({{checkedCards.length}})</span></div>
      </div>
    </div>
<!--    <div class="deletWindow" v-if="showDeletWindow">-->
<!--      <img src="../../../assets/img/icon/virtual-reality.svg">-->
<!--      <p>是否确认删除</p>-->
<!--      <div class="deletBottomBar">-->
<!--        <div id="no">取消</div>-->
<!--        <div id="yes">确定</div>-->
<!--      </div>-->
<!--    </div>-->
<!--    不通过-->
    <div class="makeSure" v-show="this.$store.state.showMakeSure2">
      <div class="makeSureImg2"></div>
      <p>是否确认不通过?</p>
      <div class="bottom">
        <span id="not" @click="notSure2">取消</span>
        <span id="yes" @click="sure2">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import config from '../../../../vue.config'
export default {
  name: 'EApeal',
  data () {
    return {
      pageKey: 0,
      baseUrl: config.devServer.proxy['/student'].target + '/studentevaluation/api/otheract/',
      cardList: [
        // {
        //   id: 1,
        //   title: '大学英语四级证书',
        //   content: '老师您好，我想问一下 为什么四级证书不可以加分？',
        //   reply: '操作失误，立马加！',
        //   selected: false,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd',
        //   appeal: 'bool bool u'
        // },
        // {
        //   id: 2,
        //   title: '第十三届“天王凉破”王者荣耀争霸赛冠军',
        //   content: '为什么电竞类比赛不能加分？9012年了还有歧视链这一说吗？',
        //   reply: '',
        //   selected: false,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd',
        //   appeal: 'bool bool u'
        // },
        // {
        //   id: 3,
        //   title: '华南农业大学学生社团联合会广场舞大赛',
        //   content: '社团联合会不同于社团，接下来这里会打上一段废话来阐述超过两行的诉求怎么显示，没错就是废话',
        //   reply: '',
        //   selected: false,
        //   url: '',
        //   name: '111',
        //   number: '222',
        //   content: 'asdasasd',
        //   appeal: 'bool bool u'
        // }
      ],
      checkedCards: [],
      checkAll: false,
      showDeletWindow: false
    }
  },
  methods: {
    clickCheckCircle: function (i) {
      this.cardList[i].selected = !this.cardList[i].selected
      if (this.cardList[i].selected) {
        this.checkedCards.push(this.cardList[i])
        if (this.checkedCards.length == this.cardList.length) { this.checkAll = true }
      } else {
        var id = this.cardList[i].id
        this.checkAll = false
        for (var j = 0; j < this.checkedCards.length; j++) {
          if (this.checkedCards[j].id == id) {
            this.checkedCards.splice(j, 1)
            break
          }
        }
      }
      console.log(this.checkedCards)
    },
    getColor: function (i) {
      var x = i % 3
      if (x == 0) return 'purple'
      else if (x == 1) return 'yellow'
      else return 'red'
    },
    clickSelectAll: function () {
      this.checkAll = !this.checkAll
      if (this.checkAll) {
        for (var i = 0; i < this.cardList.length; i++) {
          this.cardList[i].selected = true
        }
        this.checkedCards = this.cardList.slice(0)
      } else {
        for (var i = 0; i < this.cardList.length; i++) {
          this.cardList[i].selected = false
          this.checkedCards = []
        }
        console.log(this.selected)
      }
    },
    clickButtom: function () {
      // 判断选择状态
      if (this.checkedCards.length == 0) {
        console.log('未选择')
      }
      // 判断管理状态
      // 1、通过
      // 2、不通过
      else if (this.$store.state.indexState1) {
        console.log('不通过')
        // this.showDeletWindow = true
        this.$store.commit('changeCoverableState', true) // 幕布
        this.$store.commit('setShowMakeSure2', true)// 弹窗
      } else {
        console.log('通过')
        this.$store.commit('changeCoverableState', true) // 幕布
        this.$store.commit('setShowIndexAddMarkWindow', true) // 加分
      }
    },
    sure2: function () {
      // 确认不通过
      // 选中的申诉不通过
      console.log('确认不通过')
      this.$store.commit('changeCoverableState', false)// 隐藏cover
      this.$store.commit('setShowMakeSure2', false)// 隐藏确认
      var checkCards = this.checkedCards
      console.log(checkCards)

      for (var i = 0; i < this.checkedCards.length; i++) {
        var obj = this.checkedCards[i]
        var data = {
          id: obj.actId,
          pass: false,
          reply: obj.reply,
          from: obj.from,
          subject: null,
          reluIndex: null,
          mark: 0
        }
        console.log(data)
        for (var i = 0; i < this.cardList.length; i++) {
          if (this.cardList[i].id == obj.id) {
            this.cardList.splice(i, 1)
            break
          }
        }
        // lyl:更新为cloud接口
        axios({
          url: '/studentevaluation/api/exam/appeal',
          // 原POST方法
          method: 'put',
          data: data
        })
      }
    },
    notSure2: function () {
      // 不确认不通过
      console.log('不确认不通过')
      this.$store.commit('changeCoverableState', false)// 隐藏cover
      this.$store.commit('setShowMakeSure2', false)// 隐藏确认
    },
    clickJiantou: function (i) {
      var obj = this.cardList[i]
      var info = {
        url: obj.url,
        title: obj.title,
        content: obj.content,
        appeal: obj.appeal,
        name: obj.name,
        number: obj.number
      }
      this.$store.commit('setInfo', info)
    }
  },
  computed: {
    state1: function () {
      return this.$store.state.indexState1
    },
    action2: function () {
      return this.$store.state.action2
    }
  },
  watch: {
    action2: function (o, n) {
      console.log('监听到action2')
      // 进行后端交互
      // 将选中的申诉提交给后端，并且告诉后端他们申诉后获得的加分以及条目
      var add = this.$store.state.addMark
      var relu = this.$store.state.selectedRelu
      var cards = this.checkedCards
      var subject = 0
      if (relu.subject == '智育')subject = 1
      else if (relu.subject == '体育')subject = 2
      if (!this.$store.state.yes) {
        console.log('yes is not true')
        return
      }
      console.log(add)
      console.log(relu)

      for (var i = 0; i < this.checkedCards.length; i++) {
        var obj = this.checkedCards[i]
        var data = {
          id: obj.actId,
          pass: true,
          reply: obj.reply,
          from: obj.from,
          subject: subject,
          reluIndex: relu.num,
          mark: add
        }
        console.log(data)
        for (var i = 0; i < this.cardList.length; i++) {
          if (this.cardList[i].id == obj.id) {
            this.cardList.splice(i, 1)
            break
          }
        }
      // lyl更新为cloud版本
        axios({
          url: '/studentevaluation/api/exam/appeal',
          method: 'put',
          data: data
        })
      }
    }
  },
  mounted () {
    var count = 1
    this.cardList = []
    console.log('挂载')
    axios({
      // lyl：更新为cloud接口 exam模块
      // params改为动态
      url: '/studentevaluation/api/exam/hello',
      methods: 'get',
      params: {
        userName: this.$store.getters.getLoginUser.collegeName
      }
    }).then(res => {
      console.log('-----------------hello-----------------')
      console.log(res)
      console.log('-----------------hello-----------------')
      for (var i = 0; i < res.data.data.length; i++) {
        var obj = res.data.data[i]
        console.log('hello' + obj.examed + ', ' + obj.appealed)
        if (obj.examed == true || !obj.appealed) continue
        this.cardList.push(
          {
            actId: obj.actId,
            id: count++,
            title: obj.actName,
            selected: false,
            name: obj.organization,
            number: obj.uploaderId,
            content: obj.appealContent,
            reply: '',
            actTip: obj.actTip,
            from: '社团',
            url:null
          }
        )
        this.$store.state.Enumber.appeal = this.cardList.length
      }

      // this.$forceUpdate()
      ++this.pageKey
    })
    // lyl：cloud接口 exam模块 参数改为this.$store.getters.getLoginUser.collegeName
    axios('/studentevaluation/api/exam/helloOther?college=' + this.$store.getters.getLoginUser.collegeName).then(res => {
      console.log('----------------helloOther-----------------')
      console.log(res)
      console.log('----------------helloOther-----------------')
      for (var i = 0; i < res.data.data.length; i++) {
        var obj = res.data.data[i]
        console.log('helloOther')
        console.log(obj)
        console.log('helloOther:' + obj.otherActDO.isChecked + ', ' + obj.otherActDO.isAppealed)
        // if (obj.isChecked == true || !obj.isAppealed) continue
        // 两边都有  是不是魔怔了？  为什么有些地方otherActDO  有些地方加了   就nm离谱
        // 已经check(审核通过) 或者 isAppealed == false (没有申诉) 跳过
        if (obj.otherActDO.isChecked == true || !obj.otherActDO.isAppealed) continue
        this.cardList.push(
          {
            actId: obj.otherActDO.id,
            id: count++,
            title: obj.otherActDO.otherActName,
            selected: false,
            name: '',
            number: obj.otherActDO.studentId,
            content: obj.otherActDO.appealRemark,
            reply: '',
            actTip: obj.otherActDO.additionalBasis,
            from: '个人',
            url: obj.otherActDO.otherActImageUrl
          }
        )
        this.$store.state.Enumber.appeal = this.cardList.length
      }
    })
    console.log(this.$store.state.Enumber)
  }
}
</script>

<style scoped lang="scss">
.bottomBar{
  width: 100%;
  height: px2rem(54);
  position: fixed;
  /*top: px2rem(557);*/
  bottom: px2rem(55);
  background: rgba(255,255,255,1);
  display: flex;
  align-items: center;
  font-size:px2rem(14);
  font-family:PingFang SC;
  font-weight:500;
  line-height:px2rem(20);
  .selectAll{
    width: px2rem(58);
    height: 100%;
    margin-left: px2rem(36);
    color: rgba(38,38,38,1);
    display: flex;
    align-items: center;
    justify-content: center;
    /*img{*/
    /*  width: px2rem(20);*/
    /*  height: px2rem(20);*/
    /*}*/
    .circle{
      width: px2rem(20);
      height: px2rem(20);
      border: px2rem(1) solid rgba(112,112,112,1);
      border-radius: 50%;
    }
    span{
      white-space: nowrap;
      margin-left: px2rem(10);
    }
  }
  .passButtom{
    width: px2rem(90);
    height: px2rem(44);
    margin-left: px2rem(179);
    background: url("../../../assets/img/icon/uploader_file_btn_sub.svg");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:rgba(255,255,255,1);
  }
}
.showView{
  width: 100%;
  height: px2rem(545);
  overflow-x: hidden;
  /*overflow-y: auto;*/
  #showul{
    width: 100%;
   // height: calc(100% - #{px2rem(54)});
    height: 100%;
    overflow-y: scroll;
  }
  ul{
    display: flex;
    flex-direction: column;
    list-style: none;
    align-items: center;
    li{
      width: px2rem(337);
      height: px2rem(104);
      border-radius: px2rem(6);
      background: white;
      margin-top: px2rem(10);
      display: flex;
      flex-direction: column;
      .shang{
        width: 100%;
        height: px2rem(44);
        display: flex;
        align-items: center;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:800;
        line-height:px2rem(25);
        color:rgba(51,51,51,1);
        .cardTitle{
          height: px2rem(25);
          max-width: px2rem(235);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        img{
          width: px2rem(10);
          height: px2rem(18);
          margin-left: px2rem(5);
        }
      }
      .xia{
        display: flex;
        flex-direction: column;
        font-size:px2rem(12);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(17);
        .cardContent{
          color:rgba(51,51,51,1);
          width: px2rem(264);
          height: px2rem(34);
          overflow: hidden;
          margin-left: px2rem(44);
        }
        .cardInput{
          width: px2rem(268);
          height: px2rem(23);
          /*margin-top: px2rem(5);*/
          color:rgba(38,38,38,1);
          background:rgba(242,244,243,1);
          box-shadow:0 0 px2rem(2) rgba(2,164,237,1);
          opacity:1;
          border-radius:px2rem(2);
        }
        input{
          margin-left: px2rem(49);
          -web-kit-appearance:none;
          -moz-appearance: none;
          /*width: 100%;*/
          /*height: 100%;*/
          background:rgba(242,244,243,1);
          opacity:1;
          border-radius:px2rem(2);
          width: px2rem(268);
          height: px2rem(23);
          font-size:px2rem(12);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(17);
          color:rgba(38,38,38,1);
        }
        input:focus{
          box-shadow:0 0 px2rem(2) rgba(2,164,237,1);
        }
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
          font-size:px2rem(12);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(17);
          color:rgba(188,191,196,1);
        }

        input:-moz-placeholder, textarea:-moz-placeholder {
          font-size:px2rem(12);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(17);
          color:rgba(188,191,196,1);
        }

        input::-moz-placeholder, textarea::-moz-placeholder {
          font-size:px2rem(12);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(17);
          color:rgba(188,191,196,1);
        }

        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
          font-size:px2rem(12);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(17);
          color:rgba(188,191,196,1);
        }
        /*获得焦点隐藏polaceholder*/
        /* WebKit浏览器 */
        input:focus::-webkit-input-placeholder { color:transparent; }

        /* Firefox 4 至 18 */
        input:focus:-moz-placeholder { color:transparent; }

        /* Firefox 19+ */
        input:focus::-moz-placeholder { color:transparent; }

        /* IE 10+ */
        input:focus:-ms-input-placeholder { color:transparent; }
      }
    }
    .purple{
      border-left: px2rem(5) solid #aa7cec;
    }
    .yellow{
      border-left: px2rem(5) solid #fec906;
    }
    .red{
      border-left: px2rem(5) solid #fc6985;
    }
  }
  .checkCircle{
    width: px2rem(44);
    height: px2rem(44);
  }
  .onCheck{
    background: url("../../../assets/img/icon/file_rb_s.svg");
    background-size: 100% 100%;
  }
  .noCheck{
    background: url("../../../assets/img/icon/file_rb_n.svg");
    background-size: 100% 100%;
  }

}
#noBorder{
  border: white;
}
.onCheck1{
  /*background: #02A4ED;*/
  background: url("../../../assets/img/icon/file_rb_s.svg") center center no-repeat;
  background-size:px2rem(44) px2rem(44);
}
  .deletWindow{
    width: px2rem(280);
    height: px2rem(350);
    float: left;
    position: absolute;
    left: px2rem(48);
    bottom: px2rem(158);
    z-index: 3;
    background:rgba(255,255,255,1);
    opacity:1;
    border-radius:px2rem(31) px2rem(31) px2rem(31) px2rem(31);
    img{
      margin-top: px2rem(26);
      margin-left: px2rem(72);
      width: px2rem(136);
      height: px2rem(150);
    }
    p{
      margin-top: px2rem(22);
      margin-left: px2rem(56);
      font-size:px2rem(24);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(33);
      color:rgba(38,38,38,1);
      opacity:1;
    }
    .deletBottomBar{
      width: 100%;
      height: px2rem(70);
      background:rgba(241,241,241,1);
      opacity:1;
      border-radius:0 0 px2rem(31) px2rem(31);
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      #yes{
        width: px2rem(80);
        height: px2rem(44);
        margin-right: px2rem(25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(255,255,255,1);
        background: -webkit-linear-gradient(to right,#59C2FF, #9D6AE8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to right,#59C2FF, #9D6AE8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to right,#59C2FF, #9D6AE8); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right,#59C2FF, #9D6AE8); /* 标准的语法 */
        border-radius: px2rem(31);
      }
      #no{
        width: px2rem(80);
        height: px2rem(44);
        margin-left: px2rem(25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(255,255,255,1);
        background: #F84545;
        border-radius: px2rem(31);
      }
    }
  }
.makeSure{
  width:px2rem(280);
  height:px2rem(350);
  background:rgba(255,255,255,1);
  opacity:1;
  border-radius:px2rem(31);
  z-index: 3;
  position: absolute;
  float: left;
  left: px2rem(48);
  bottom: px2rem(158);
  .makeSureImg{
    background: url("../../../assets/img/icon/list-is-empty-3.svg");
    background-size: 100% 100%;
    width: px2rem(151);
    height: px2rem(148);
    margin-top: px2rem(26);
    margin-left: px2rem(64);
  }
  .makeSureImg2{
    background: url("../../../assets/img/icon/pluto-unsubscribed.svg");
    background-size: 100% 100%;
    width: px2rem(151);
    height: px2rem(148);
    margin-top: px2rem(26);
    margin-left: px2rem(64);
  }
  p{
    font-size:px2rem(24);
    font-family:PingFang SC;
    font-weight:bold;
    line-height:px2rem(33);
    color:rgba(38,38,38,1);
    opacity:1;
    margin-top: px2rem(24);
    margin-left: px2rem(56);
  }
  .bottom{
    width:100%;
    height:px2rem(70);
    background:rgba(241,241,241,1);
    opacity:1;
    border-radius:0 0 px2rem(31) px2rem(31);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
  }
  span{
    width: px2rem(80);
    height: px2rem(44);
    border-radius: px2rem(31);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:500;
    line-height:px2rem(25);
    color:rgba(255,255,255,1);
  }
  #not{
    margin-left: px2rem(25);
    background: #F84545;
  }
  #yes{
    margin-right: px2rem(25);
    background: -webkit-linear-gradient(to right,#59C2FF, #9D6AE8); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(to right,#59C2FF, #9D6AE8); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(to right,#59C2FF, #9D6AE8); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,#59C2FF, #9D6AE8); /* 标准的语法 */
  }
}
</style>
